<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="bar1" style="width: 600px;height: 400px;"></div>

<table>
    <tr th:each="mr : ${results}">
        <td th:text="${mr.goodsId}"></td>
        <td th:text="${mr.goodsViewCount}"></td>
    </tr>
</table>
<!--        <div th:text="我这里的东西可以动态替换div的内容">这是正常的界面</div>-->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>

    // setTimeout(5000,functionxxx) //定时执行代码
    $(function(){
        // 初始化容器
        var myChart = echarts.init(document.getElementById("bar1"));

        //判断当前浏览器是否支持WebSocket
        if (!('WebSocket' in window)) {
            alert('Not support websocket');
        }

        // 简历websocket连接
       var ws = new WebSocket("ws://localhost:8080/ws/showCharts/bar");

        //连接成功建立的回调方法
        ws.onopen = function (event) {
            console.log('建立连接')
        }

        //接收到消息的回调方法
        ws.onmessage = function (event) {

            //刷新图表
            // 使用ajax方式异步调用controller的方法，获取图表数据
            $.ajax({
                url:'/getBarData',
                dataType:'json' ,//返回值类型
                success:function(data){ //data接收响应的数据

                    // 想在请求成功之后做什么？怎么去用这些数据？
                    var option = {
                        xAxis: {
                            type: 'category',
                            data: data.xData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data.yData,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            })
        }

        //连接发生错误的回调方法
        ws.onerror = function (event) {
            console.log('发生错误')
        }

        //连接关闭的回调方法
        ws.onclose = function (event) {
            console.log('关闭连接')
        }

        // 使用ajax方式异步调用controller的方法，获取图表数据
        $.ajax({
            url:'/getBarData',
            dataType:'json' ,//返回值类型
            success:function(data){ //data接收响应的数据

                // 想在请求成功之后做什么？怎么去用这些数据？
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.yData,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
    })




</script>
</body>
</html>